<template>
	<z-paging ref="paging" class="paging" v-model="dataList" :empty-view-center="false" @query="queryList" :loading-more-enabled="false" empty-view-text="暂无消息哦~">
		<!-- <view slot="top">我是固定在顶部的view</view> -->
		<view class="citem" v-for="(item, index) in dataList" @click="navTo('/pages/yuShuo/index/notice/noticeDetails/noticeDetails', { id: item.id })">
			<!-- isRead 是否已读 1是，0否 -->
			<view class="box">
				<image class="cimg" src="/static/xtgg.png" mode="widthFix"></image>
				<u-badge v-if="+item.isRead === 0" class="dots" :isDot="true" type="success" :offset="[0, 100]"></u-badge>
			</view>
			<view class="ccr">
				<view class="ccrt">
					<text class="ccrttz">{{ item.msgTitle }}</text>
					<text class="ccrtsj">{{ item.updatedTime }}</text>
				</view>
				<view class="ccrb">
					<text class="ccrbt">{{ item.msgContent }}</text>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
import { noticeList } from '../../../../api/yuShuo';
import { setLoadingToast, navTo } from '@/common/utils';
export default {
	props: {
		item: Object,
		readId: String
	},
	watch: {
		// 监听是否有已读过的数据
		readId(newVal, oldVal) {
			if (newVal) {
				this.readOk(newVal);
			}
		}
	},
	data() {
		return {
			dataList: []
		};
	},
	methods: {
		navTo,
		queryList(pageNumber, pageSize) {
			const that = this;
			noticeList({
				type: this.item.value,
				pageNumber,
				pageSize
			}).then((res) => {
				uni.hideLoading();
				if (res.code) {
					that.$refs.paging.complete(res.data.rows);
				} else {
					that.$refs.paging.complete([]);
				}
			});
		},
		readOk(id) {
			const newDeep = this.dataList.map((v) => {
				if (v.id == id) {
					// isRead 是否已读 1是，0否
					v.isRead = 1;
				}
				return v;
			});
			this.$refs.paging.complete(newDeep);
		}
	}
};
</script>

<style scoped lang="scss">
.citem {
	border-bottom: 1rpx solid #f8f8f8;
	// border-bottom: 1rpx solid #f1f1f1;
	padding: 30rpx;
	display: flex;
	align-items: center;

	.ccr {
		flex: 1;
		// border: 1rpx solid red;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.ccrt {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// border: 1rpx solid red;

			.ccrttz {
				width: 300rpx;
				// border: 1rpx solid red;
				font-size: 30rpx;
				color: #474747;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.ccrtsj {
				font-size: 23rpx;
				color: #757575;
				// border: 1rpx solid red;
				width: 270rpx;
				text-align: right;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.ccrb {
			width: 600rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			padding: 8rpx 0;

			.ccrbt {
				font-size: 23rpx;
				color: #757575;
				width: 600rpx;
				white-space: nowrap;
			}
		}
	}

	.box {
		position: relative;

		.cimg {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}

		.dots {
			position: absolute;
			right: 10rpx;
			top: 0;
		}
	}
}
</style>
